﻿<%@ Page Title="Buscador Avanzado - Four Hoteles" Language="C#" MasterPageFile="~/Hoteles.Master" AutoEventWireup="true" CodeBehind="BuscadorAvanzado.aspx.cs" Inherits="HotelesWeb.BuscadorAvanzado" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <link href="Content/Styles/Propios/busquedaAvanzada.css" rel="stylesheet" />
    <link href="Content/Styles/Propios/habitaciones.css" rel="stylesheet" />
    <link href="Content/Styles/Externos/jgallery.css" rel="stylesheet" />
    <link href="Content/Styles/Propios/reserva.css" rel="stylesheet" />
    <script src="Scripts/Propios/BusquedaAvanzada.js"></script>
    <script src="Scripts/Externos/jquery-jgallery.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="Cuerpo" runat="server">
    <div id="contentBusquedaAvanzada">
        <div id="contentBuscador">
            <h2>Buscador avanzado</h2>
            <div id="contentFiltros">
                <div class="filaFiltros">
                    <label for="inputBusqueda">Búsqueda</label>
                    <input id="inputBusqueda" type="text" placeholder="Nombre de hotel" title="Con este buscador podrá realizar su reserva rapidamente"/> 
                </div>
                <div class="filaFiltros">
                    <div id="contentPuntuaciones">
                        <div id="contentEstrellas">
                            <label>Nº Estrellas</label>
                            <img id="estrella1off" class="una-estrella estrella-off" src="Content/Images/icono_estrella_off.png" />
                            <img id="estrella1on" class="una-estrella estrella-on" src="Content/Images/icono_estrella_on.png" />
                            <img id="estrella2off" class="dos-estrella estrella-off" src="Content/Images/icono_estrella_off.png" />
                            <img id="estrella2on" class="dos-estrella estrella-on" src="Content/Images/icono_estrella_on.png" />   
                            <img id="estrella3off" class="tres-estrella estrella-off" src="Content/Images/icono_estrella_off.png" />
                            <img id="estrella3on" class="tres-estrella estrella-on" src="Content/Images/icono_estrella_on.png" />
                            <img id="estrella4off" class="cuatro-estrella estrella-off" src="Content/Images/icono_estrella_off.png" />
                            <img id="estrella4on" class="cuatro-estrella estrella-on" src="Content/Images/icono_estrella_on.png" />
                            <img id="estrella5off" class="cinco-estrella estrella-off" src="Content/Images/icono_estrella_off.png" />
                            <img id="estrella5on" class="cinco-estrella estrella-on" src="Content/Images/icono_estrella_on.png" />
                        </div>
                        <div id="contentPrecio">
                             <label>Precio <span id="spanRangoPrecio"></span></label>
                             <div id="sliderPrecio"></div>
                        </div>
                        <div id="contentPuntuacion">
                             <label>Puntuación <span id="spanRangoPuntuacion"></span></label>
                             <div id="sliderPuntuacion"></div>
                        </div>
                    </div>
                    <div id="contentTipoHabitacion">
                        <label id="lblTipoHabitacion" for="lblTipoHabitacion">Tipo de habitación</label>
                        <label for="ckTipoHAbitacionIndividual">Individual</label>
                        <input id="ckTipoHAbitacionIndividual" type="checkbox"/>
                        <label for="ckTipoHAbitacionDoble2Camas">Doble (2 camas)</label>
                        <input id="ckTipoHAbitacionDoble2Camas" type="checkbox"/>
                        <label for="ckTipoHAbitacionDoble1Cama">Doble (1 cama)</label>
                        <input id="ckTipoHAbitacionDoble1Cama" type="checkbox"/>
                    </div>  
                </div>
                <div class="filaFiltros">
                    <label for="inputFechaEntrada">Fecha entrada</label>
                    <input id="inputFechaEntrada" type="text" />
                    <label for="inputFechaSalida">Fecha salida</label>
                    <input id="inputFechaSalida" type="text" />
                    <label for="sltLocalidad">Localidad</label>
                    <select id="sltLocalidad">
                    </select>
                </div>
                <div id="contentServicios" class="filaFiltros">
                    <label for="ckWifi">Wifi</label>
                    <input id="ckWifi" type="checkbox"/>
                    <label for="ckParking">Parking</label>
                    <input id="ckParking" type="checkbox"/>
                    <label for="ckRestaurante">Restaurante</label>
                    <input id="ckRestaurante" type="checkbox"/>
                    <label for="ckMascotas">Mascotas</label>
                    <input id="ckMascotas" type="checkbox"/>
                    <label for="ckPiscina">Piscina</label>
                    <input id="ckPiscina" type="checkbox"/>
                    <label for="ckSpa">Spa/Zona relax</label>
                    <input id="ckSpa" type="checkbox"/>
                    <label for="ckGimnasio">Gimnasio</label>
                    <input id="ckGimnasio" type="checkbox"/>
                    <label for="ckReuniones">Reuniones</label>
                    <input id="ckReuniones" type="checkbox"/>
                </div>  
            </div>
            <div id="botonesBusqueda">
                <button id="btnLimpiarBusquedaHoteles">Limpiar</button>
                <button id="btnBuquedaHoteles">Buscar</button>
                <button id="btnNuevaBusqueda">Nueva búsqueda</button>
            </div>

        </div>
        <span id="ancla"></span>
        <div id="contentResultado">
            <h2>Resultados búsqueda</h2>
            <div id="resultadosHoteles">
              
            </div>
        </div>
    </div>

    <div id="dialogo-reserva" title="Reservar este hotel">
        <span id="habitacion-reserva"></span>
        <img src="Content/Images/fondoGaleriaCadena.png" title="Reservar" alt="Reservar" />
        <h2>Confirmación de reserva</h2>
        <p id="nombre-hotel"></p>
        <table>
            <thead>
                <tr>
                    <th>Datos reserva</th>
                    <th></th>
                    <th>Precio</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Tipo habitación</td>
                    <td id="tipo-reserva"></td>
                    <td></td>
                </tr>
                 <tr>
                    <td>Fecha entrada</td>
                    <td id="fecha-entrada-reserva"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Fecha salida</td>
                    <td id="fecha-salida-reserva"></td>
                    <td></td>
                </tr>
                <tr>
                    <td>Precio habitación/noche</td>
                    <td></td>
                    <td><span id="precio-reserva"></span> €</td>
                </tr>
                <tr>
                    <td>Número de noches</td>
                    <td></td>
                    <td id="dias-reserva"></td>
                </tr>
                <!--
                <tr>
                    <td>Número habitaciones</td>
                    <td></td>
                    <td>
                        <select id="num-habitaciones-reserva">
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                            <option value="5">5</option>
                        </select>
                    </td>
                </tr>
                -->
            </tbody>
        </table>
        <h5>Total (sin iva): <strong><span id="total-reserva-sin-iva"></span> €</strong></h5>
        <h4>Total (con iva): <strong><span id="total-reserva"></span> €</strong></h4>
         <div id="content-datos-usuario">
            <table>
                <thead>
                    <tr>
                        <th>Datos personales</th>
                        <th></th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Nombre y apellidos:</td>
                        <td id="nombre-apellidos-usuario"></td>
                    </tr>
                    <tr>
                        <td>Direccion:</td>
                        <td id="direccion-usuario"></td>
                    </tr>
                    <tr>
                        <td>Población:</td>
                        <td id="poblacion-usuario"></td>
                    </tr>
                    <tr>
                        <td>Provincia:</td>
                        <td id="provincia-usuario"></td>
                    </tr>
                    <tr>
                        <td>Teléfono:</td>
                        <td id="telefono-usuario"></td>
                    </tr>
                    <tr>
                        <td>Email:</td>
                        <td id="email-usuario"></td>
                    </tr>
                </tbody>
            </table>
        </div>

        <div id="content-tarjeta-credito">
            <label>Nº tarjeta crédito: </label>
            <input id="campo-tarjeta-1" class="campo-tarjeta numeric" type="text" maxlength="4" />
            <input id="campo-tarjeta-2" class="campo-tarjeta numeric" type="text" maxlength="4" />
            <input id="campo-tarjeta-3" class="campo-tarjeta numeric" type="text" maxlength="4" />
            <input id="campo-tarjeta-4" class="campo-tarjeta numeric" type="text" maxlength="4" />
        </div>
    </div>

</asp:Content>
